<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form{
            width: 600px;
            height: 300px;
            background-color: skyblue;
            padding-top:50px ;
            margin: 100px auto;
        }
        label{
            display: inline-block;
            width: 60px;
            text-align: right;
            margin-bottom: 10px;
        }
        input{
            width: 350px;
            /* color: #ccc; */
            /* text-align: center; */
        }
        /* span{
            color: green;
        } */
    </style>
</head>
<body>
    <form action="">
        <label for="">验证账号：</label>
        <input type="text" placeholder="用户名不得使用特殊字符，长度在6 - 20 之间">
        <span></span>
        <br>
        <label for="">昵称：</label>
        <input type="text" placeholder="请输入3-6个中文">
        <span></span>
        <br>
        <label for="">电子邮箱：</label>
        <input type="text" placeholder="163邮箱">
        <span></span>
        <br>
        <label for="">身份证号：</label>
        <input type="text" placeholder="请输入身份证号">
        <span></span>
        <br>
        <label for="">手机号码：</label>
        <input type="text" placeholder="请输入手机号码">
        <span></span>
        <br>
        <label for="">生日：</label>
        <input type="text" placeholder="请输入生日">
        <span></span>
        <br>
        <label for="">密码：</label>
        <input type="password" placeholder="请输入8-20位非空格密码">
        <span></span>
        <br>
        <label for="">确认密码：</label>
        <input type="password" placeholder="再次输入密码">
        <span></span>
        <br>
        <button>确定</button>
        <button>取消</button>
    </form>


    <script>
        //获取元素
        var inputs = document.getElementsByTagName('input')
        // console.log(_input)
        var spans = document.getElementsByTagName('span')


        //账号不能为空，只能使用数字、字母、下划线、横杠，必须字母开头，长度为6-20
        var account = /^[a-zA-Z][0-9a-zA-Z\w\-]{5,19}$/

        //昵称只能输入3-6个中文
        var _name = /^[\u4e00-\u9fa5]{3,6}$/

        //英文开头,@前面的内容可以包含数字字母下划线、-(可以多位),@后面的域名只能是163
        var _email = /^[a-zA-Z][0-9a-zA-Z\w\-]{3,15}@163\.(net|cn|com)$/

        //身份证 18位数 最后一位可能是 X x
        var _id = /^\d{17}[0-9Xx]$/

        //11位 开头必须是 1,第二位必须是 345678 还剩下9位只要是数字就可以了
        var phone = /^1[3-8]\d{9}$/


        var feteDay = /^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/

        var _code = /^\S{8,20}$/

        inputs[0].onblur = function(){
            if(account.test(inputs[0].value)){
                spans[0].innerText = '√'
                spans[0].style.color = 'green'
            }else{
                spans[0].innerText = '账号格式错误'
                spans[0].style.color = 'red'
            }
        }
        inputs[1].onblur = function(){
            if(_name.test(inputs[1].value)){
                spans[1].innerText = '√'
                spans[1].style.color = 'green'
            }else{
                spans[1].innerText = '昵称格式错误'
                spans[1].style.color = 'red'
            }
        }
        inputs[2].onblur = function(){
            if(_email.test(inputs[2].value)){
                spans[2].innerText = '√'
                spans[2].style.color = 'green'
            }else{
                spans[2].innerText = '邮箱格式错误'
                spans[2].style.color = 'red'
            }
        }
        inputs[3].onblur = function(){
            if(_id.test(inputs[3].value)){
                spans[3].innerText = '√'
                spans[3].style.color = 'green'
            }else{
                spans[3].innerText = '身份证格式错误'
                spans[3].style.color = 'red'
            }
        }
        inputs[4].onblur = function(){
            if(phone.test(inputs[4].value)){
                spans[4].innerText = '√'
                spans[4].style.color = 'green'
            }else{
                spans[4].innerText = '手机号码格式错误'
                spans[4].style.color = 'red'
            }
        }
        inputs[5].onblur = function(){
            if(feteDay.test(inputs[5].value)){
                spans[5].innerText = '√'
                spans[5].style.color = 'green'
            }else{
                spans[5].innerText = '生日格式错误'
                spans[5].style.color = 'red'
            }
        }
        inputs[6].onblur = function(){
            if(_code.test(inputs[6].value)){
                spans[6].innerText = '√'
                spans[6].style.color = 'green'
            }else{
                spans[6].innerText = '密码格式错误'
                spans[6].style.color = 'red'
            }
        }
        inputs[7].onblur = function(){
            if(inputs[7].value === inputs[6].value){
                spans[7].innerText = '√'
                spans[7].style.color = 'green'
            }else{
                spans[7].innerText = '密码前后不一致'
                spans[7].style.color = 'red'
            }
        }
        
    </script>
</body>
</html>